<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Induction Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);

            // Draw line
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            
            // Draw arrowhead
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // Coordinates and dimensions
        const xWire = 80;
        const b = 100;
        const a = 200;
        
        const xA = xWire + b;
        const yA = 250;
        const xC = xA + a;
        const yC = yA;
        const heightAB = 140; // a * tan(theta)
        const xB = xA;
        const yB = yA - heightAB;
        
        // 1. Draw the long straight wire and current I
        ctx.beginPath();
        ctx.moveTo(xWire, 30);
        ctx.lineTo(xWire, 350);
        ctx.stroke();
        drawArrow(ctx, xWire, 60, xWire, 40);

        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('I', xWire - 20, 50);

        // 2. Draw the right-angled triangle ABC
        ctx.beginPath();
        ctx.moveTo(xA, yA); // Point A
        ctx.lineTo(xB, yB); // Point B
        ctx.lineTo(xC, yC); // Point C
        ctx.closePath();
        ctx.stroke();

        // 3. Label the vertices
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('A', xA - 5, yA);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('B', xB, yB - 5);
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillText('C', xC + 5, yC);
        
        // 4. Draw the angle theta
        ctx.beginPath();
        const angleValue = Math.atan2(heightAB, a);
        ctx.arc(xC, yC, 30, Math.PI, Math.PI - angleValue, true);
        ctx.stroke();
        ctx.fillText('θ', xC - 25, yC - 12);
        
        // 5. Draw the velocity vector v
        const vY = yB + heightAB / 2;
        const vX_start = xC - a/2 + 30;
        drawArrow(ctx, vX_start, vY, vX_start + 60, vY);
        ctx.fillText('v', vX_start + 70, vY);
        
        // 6. Draw dimension lines for a and b
        const yDim = 300;
        ctx.lineWidth = 1;
        ctx.font = 'italic 18px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        // Helper for dimension arrows
        function drawDimensionArrow(ctx, x1, x2, y) {
            const headlen = 8;
            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            // Left arrowhead
            ctx.moveTo(x1 + headlen, y - headlen/2);
            ctx.lineTo(x1, y);
            ctx.lineTo(x1 + headlen, y + headlen/2);
            // Right arrowhead
            ctx.moveTo(x2 - headlen, y - headlen/2);
            ctx.lineTo(x2, y);
            ctx.lineTo(x2 - headlen, y + headlen/2);
            ctx.stroke();
        }

        // Dimension b
        drawDimensionArrow(ctx, xWire, xA, yDim);
        ctx.beginPath();
        ctx.moveTo(xWire, yDim - 5); ctx.lineTo(xWire, yDim + 5);
        ctx.moveTo(xA, yDim - 5); ctx.lineTo(xA, yDim + 5);
        ctx.stroke();
        ctx.fillText('b', (xWire + xA) / 2, yDim - 5);
        
        // Dimension a
        drawDimensionArrow(ctx, xA, xC, yDim);
        ctx.beginPath();
        ctx.moveTo(xA, yDim - 5); ctx.lineTo(xA, yDim + 5);
        ctx.moveTo(xC, yDim - 5); ctx.lineTo(xC, yDim + 5);
        ctx.stroke();
        ctx.fillText('a', (xA + xC) / 2, yDim - 5);

        // 7. Draw the bottom label
        ctx.font = '18px SimSun'; // Chinese font
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('习题 9-6 图', canvas.width / 2, 370);

    </script>
</body>
</html>